<template>
    <div class="box-addPagesPlus" :style="computedShow" @click="maskTap">
        <div class="addPagesPlus" :style="computedPagesPlusStyle" @click="addPagesTap" v-on:click.stop="doThis">

            <!--设备版本列表-->
            <template v-if="showEquipmentVersionView">
                <div class="viewHead2Plus">
                    <div class="viewItemPlus">
                        <div class="flexCommon">
                            <a-icon type="align-center"/>
                            <div>版本列表</div>
                        </div>
                        <div class="close" @click="hideAddPages">
                            <a-icon type="close"/>
                        </div>
                    </div>
                </div>
                <div class="viewBody2Plus">
                    <div class="viewItemPlus" style="border: 1px solid #e8e8e8;padding: 5px 5px;">
                        <div class="itemTextPlus">版本号</div>
                        <template>
                            <a-input placeholder="1.0.0.0" v-model="queryVersionStr"
                                     @pressEnter="queryData"/>
                        </template>
                        <div class="itemTextPlus">上传日期</div>
                        <template>
                            <a-range-picker
                                    format="YYYY-MM-DD"
                                    :placeholder="['开始时间', '结束时间']"
                                    @change="queryData"
                                    v-model="momentArr"
                            />
                        </template>
                        <a-button style="margin: 0 0 0 20px" @click="queryData">查询</a-button>
                        <a-button style="margin: 0 0 0 20px" @click="reset">重置</a-button>
                    </div>
                    <div class="viewItemPlus"
                         style="width: 1040px;border: 1px solid #e8e8e8;padding: 10px;background: #e2e2e2;">
                        <div class="itemTextPlus">双击选择版本</div>
                    </div>
                    <div class="viewItemPlus">
                        <div class="box-table">
                            <a-table :columns="columns"
                                     :dataSource="dataSource"
                                     :pagination="pagination"
                                     bordered size="small"
                                     :scroll="scroll"
                                     :customRow="customRow"
                                     :rowClassName="setRowClassName"
                                     @change="tableChange"
                            >
                                <template slot="onlineUpgradeSwitch" slot-scope="text, record">
                                    <a-switch checkedChildren="开" unCheckedChildren="关"
                                              :checked="switchChecked(text,record)"
                                              @change="onlineUpgradeSwitchChanged($event,record)"/>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </div>
                <div class="viewTail2Plus">
                    <!--                    <template>-->
                    <!--                        <a-button @click="queryData"></a-button>-->
                    <!--                        <a-button @click="hideAddPages">关闭</a-button>-->
                    <!--                    </template>-->
                </div>
            </template>
            <!--后续可补充其他添加页面-->

        </div>
    </div>
</template>

<script>
    /*外部js引入*/
    import Constant from "../utils/Constant";
    import UpdateServiceApi from '../api/equipment/UpdateService';

    const columns = [
        {
            title: "版本号"
            , dataIndex: "version"
            , width: '10%'
        }, {
            title: "更新内容"
            , dataIndex: "updateContent"
            , width: '10%'
        },
        {
            title: "下载地址"
            , dataIndex: "downloadUri"
            , width: '10%'
        },
        {
            title: "上传者"
            , dataIndex: "id"
            , width: '10%'
        },
        {
            title: "上传时间"
            , dataIndex: "forbidUpdateTimeStr"
            , width: '10%'
        },
    ];
    const dataSource = [];
    const queryCondition = {
        limit: "10",
        curr: "1",
        version: "",
        uploadTime: "",
        uploadTimeStart: "",
        uploadTimeEnd: "",
        softwareType: "0",
        deviceTypeId: ""
    };

    export default {
        name: "AddPagesPlus",
        data() {
            return {
                /**增强弹窗基本数据项**/
                isShowAddPagesPlus: false,
                maskClose: true,
                callBackData: {},
                successFunc: "",
                viewType: 0,
                /**公共属性**/
                allowClear: true,
                operateSign: "",
                /*分页插件*/
                pagination: {
                    showTotal: total => `共${total}条`,
                    total: 0,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 10
                },
                /*表格固定头部*/
                scroll: {
                    y: 250,
                },
                tableState: {
                    rowId: -1,
                },
                currRowData: {},
                columns,
                dataSource,
                visitData: {},
                /**设备版本新增/编辑**/
                queryVersionStr: "",
                queryCondition,
                momentArr: null,

            };
        },
        methods: {
            /*点击遮罩层*/
            maskTap() {
                if (!this.maskClose) return;
                this.hideAddPages();
            },
            /*隐藏遮罩层*/
            hideAddPages() {
                this.isShowAddPagesPlus = false;
                this.clearData();
            },
            /*防止子类点击事件被穿透*/
            addPagesTap() {
            },
            doThis() {
            },
            /*回调显示弹框*/
            showAddPagesView(viewType, data, func) {
                this.callBackData = data;
                this.successFunc = func;
                this.viewType = viewType;
                this.isShowAddPagesPlus = true;
                if (viewType == Constant.viewTypePlus.GET_VERSION_LIST) {
                    this.queryData();
                }

            },
            /**通用方法**/
            /*清除属性*/
            clearData() {
                this.momentArr = null;
                this.queryVersionStr = null;
            },
            /*表格*/
            tableChange(page) {

                this.queryCondition.curr = page.current;
                this.queryData();
            },
            customRow(record) {
                return {
                    on: { // 事件
                        click: () => {
                            //单击事件
                            this.currRowData = record;
                            this.tableState.rowId = record.id;
                        },       // 点击行
                        dblclick: () => {
                            //双击事件
                            this.successFunc(this.currRowData);
                            this.hideAddPages();
                        }
                    },
                }
            },
            setRowClassName(record) {
                return record.id === this.tableState.rowId ? 'clickRowStyl' : '';
            },
            /**版本列表**/
            reset() {
                this.clearData();
                this.queryData();
            },
            queryData() {
                let condition = this.queryCondition;
                if (this.momentArr != undefined && this.momentArr.length != 0) {
                    condition.uploadTimeStart = this.momentArr[0].format('YYYY-MM-DD');
                    condition.uploadTimeEnd = this.momentArr[1].format('YYYY-MM-DD');
                } else {
                    condition.uploadTimeStart = null;
                    condition.uploadTimeEnd = null;
                }
                condition.deviceTypeId = this.callBackData == null || this.callBackData == '' ? null : this.callBackData.key;
                condition.version = this.queryVersionStr == null ? null : this.queryVersionStr;
                condition.uploadTime = this.queryUploadDateStr == null ? null : this.queryUploadDateStr.format("YYYY-MM-DD");
                UpdateServiceApi.getVersionManageList(condition).then((data) => {
                    this.dataSource = data.data.list;
                    this.pagination.total = data.data.total;
                }).catch(err => {
                    console.log("获取设备版本信息异常！", err);
                });
            },
        },

        computed: {
            computedShow() {
                return this.isShowAddPagesPlus ? "display: block;" : "display: none;";
            },
            computedPagesPlusStyle() {
                return this.viewType == Constant.viewTypePlus.GET_VERSION_LIST ? "width:1070px" : "";
            },

            /**条件显示模块**/
            showEquipmentVersionView() {
                let bool = this.viewType == Constant.viewTypePlus.GET_VERSION_LIST;
                return bool;
            },
        },
        mounted() {
            window.addPagesPlusControl = this;
        },
        destroyed() {
            delete window.addPagesPlusControl;
        }


    }
</script>

<style>
    .box-addPagesPlus {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 8;
    }

    .clickRowStyl {
        background-color: #C1E0FD;
    }

    .addPagesPlus {
        width: 570px;
        padding-bottom: 20px;
        background: #fff;
        border-radius: 10px;

        position: fixed;
        left: 15%;
        top: 15%;
        /*transform: translate(-50%, -50%);*/
        /* flex */
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    /*设备录入-添加页面  相关样式*/
    .box {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .box .box-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 5px;
    }

    .box .box-item button {
        margin-left: 10px;
    }

    .flexCommon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .viewHeadPlus {
        min-width: 5.7rem;
    }

    .viewHead2Plus {
        min-width: 10.7rem;
    }

    .viewBodyPlus {
        min-width: 5.7rem;
    }

    .viewBody2Plus {
        min-width: 10.7rem;
    }

    .viewTailPlus {
        min-width: 5.7rem;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .viewTailPlus button {
        margin: 0 10px 0 0;
    }

    .viewHeadPlus .viewItemPLus {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .viewHead2Plus .viewItemPlus {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .viewHeadPlus .viewItemPlus .flexCommon {
        margin-left: 5px;
    }

    .viewHeadPlus .viewItemPlus .close {
        justify-self: flex-end;
        margin-right: 5px;
    }

    .viewHead2Plus .viewItemPlus .close {
        justify-self: flex-end;
        margin-right: 5px;
    }

    .viewBodyPlus .viewItemPlus {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
    }

    .viewBody2Plus .viewItemPlus {
        display: flex;
        /*justify-content: center;*/
        align-items: center;
        margin: 10px 10px 10px 20px;
    }

    .viewItemPlus .ant-input {
        width: 2rem;
        margin: 0 10px 0 0;
    }

    .viewItemPlus textarea {
        width: 2.1rem;
        min-height: 90px;
    }

    .viewItemPlus .box-table {
        width: 10.4rem;
    }

    .itemTextPlus {
        width: 1.0rem;
    }

    .itemText2Plus {
        width: 1.3rem;
    }

    .viewItemPlus .ant-time-picker {
        margin: 0 0.2rem;
    }


</style>
